<template>
    <div class="home-bg">
        <div class="name">
            <span>Welcome</span>
            <h1>I'm 黄启文</h1>
            <h6>{{job}}</h6>
        </div>

    </div>
</template>

<script>
    export default {
        name: "home",
        data(){
            return{
                timer:null,
                job:'',
            }
        },
        mounted() {
            var html =  ` 前端工程师`
            let l = 0;
            let timer = setInterval(()=>{
                if(l === html.length){this.job = '';l=0}
                this.job += html[l++]
            },500)

        },
        methods:{

        }
    }
</script>

<style scoped>
    .home-bg{
        background-image: url("../../public/img/bg.jpg");
        background-position: center;
        background-size: cover;
        width: 100vw;
        height: 100vh;
        position: relative;
        display: table;
    }
    .home-bg .name{
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        color: #fff;
    }
    .home-bg .name span{
        font-size: 28px;
    }
    .home-bg .name h1{
        color: #fff;
        margin-bottom: 0;
        font-size: 40px;
        font-weight: 900;
    }

</style>